<template>
  <!-- 线段文字标注 -->
  <div class="form">
    <div class="inputBox">
      <label for="">端点1</label>
      <input type="text" v-model.number="x1" />
      <input type="text" v-model.number="y1" />
    </div>
    <div class="inputBox">
      <label for="">端点2</label>
      <input type="text" v-model.number="x2" />
      <input type="text" v-model.number="y2" />
    </div>
    <div class="inputBox">
      <label for="">标注</label>
      {{ text }}
    </div>
    <div class="inputBox">
      <label for="">strokeColor</label>
      <input type="color" name="" id="" v-model="stroke" />
    </div>
    <div class="inputBox">
      <label for="">strokeWidth</label>
      <input type="text" name="" v-model.number="strokeWidth" />
    </div>
    <div class="inputBox">
      <button @click="addLineLabel">addLineLabel</button>
    </div>
  </div>
</template>
<script>
import { reactive, toRefs, toRaw, computed, watch } from "vue";
import * as d3 from "d3";
import { lineLabelDrawAdd } from "../../util/geoDrawAdd.js";

export default {
  setup() {
    let lineLabel = reactive({
      x1: 22,
      y1: 22,
      x2: 22,
      y2: 222,
      stroke: "#000",
      strokeWidth: 4,
      text: "",
    });

    const distance = computed(() => {
      let w = Math.abs(lineLabel.x1 - lineLabel.x2);
      let h = Math.abs(lineLabel.y1 - lineLabel.y2);
      let z = Math.sqrt(w * w + h * h);
      return z.toFixed(2);
    });

    watch(distance, (distance, prevDistance) => {
      lineLabel.text = distance;
    });

    function addLineLabel() {
      const geo = {};
      Object.assign(geo, toRaw(lineLabel));
      lineLabelDrawAdd(geo);
    }

    return { ...toRefs(lineLabel), addLineLabel };
  },
};
</script>
